<template>
  <view class="query">
		<scroll-view scroll-y="true" :scroll-into-view="scrollToView" 
		:style="{ height: hei + 'px' }"	scroll-with-animation="true">
			<view class="ddd2">
				<view v-for="(i, index) in obj" :key="index" :id="'msg' + index"
				:class="( i.state == 0 ? 'aiStyle' : i.state == 1 ? 'myStyle' : 'knowledge' )">
					<view>
						<view v-if="i.state != 2">
							{{i.text}}
						</view>
						<view class="scroll-view_H" v-else-if="i.state == 2">
							<view v-for="i2 in i.knowlist" :key="i2.kid"  @tap="navigate(i2.kid)">
								<view class="tip" v-if="i2.knowledgeState == 0">疾病</view>
								<view class="tip2" v-else>药物</view>
								<view class="title">
									{{i2.title}}
								</view>
								<view class="text">
									{{i2.article}}
								</view>
								<view class="jumpknow" id="jumpknow2">
									详情
									<image :src="getDetails"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
  </view>
</template>

<script>

export default {
	props: {
		obj: Array,
		state: String,
		hei: Number
	},
	data () {
		return {
			scrollToView: ''
		}
	},
	watch: {
		obj: {
			handler: function () {
				const query = uni.createSelectorQuery().in(this);
				query.select('.ddd2').boundingClientRect(data => {
					if(data.height > this.hei && data.height > 450) {
						console.log(data.height, this.hei);
						this.scrollToView = 'msg' + (this.obj.length - 1)
					}
				}).exec();
			},
			deep: true
		}
	},
	methods: {
		navigate: function (navData) {
			uni.navigateTo({
				url: `/pages/knowDetailsList/knowDetailsList?index=${navData}`
			})
		},
	},
	computed: {
		getDetails: function () {
			return this.$url + '/state/jiantou.png'
		}
	}
}
</script>

<style lang="scss" scoped>
  .query {
		padding: 40rpx 20rpx 200rpx 20rpx;
		$padd: 20rpx;
		
		/*  #ifdef MP-WEIXIN */
			.ddd {
				height: 1100rpx;
			}
		/*  #endif  */
		/*  #ifdef H5 */
			.ddd {
				height: 1050rpx;
			}
		/*  #endif  */
		.aiStyle { //公共 Ai回复样式
			display: flex;
			justify-content: flex-start;
			margin: 30rpx 0;
			max-width: 70%;
			view {
				padding: $padd / 2 20rpx;
				background-color: #F3F5F7;
				border-radius: 0 30rpx 30rpx 30rpx;
			}
		}
		.myStyle { //公共 自己回复样式
			display: flex;
			justify-content: flex-end;
			margin: 30rpx 0;
			view {
				max-width: 70%;
				background-color: #4E6CFF;
				color: #fff;
				border-radius: 30rpx 0rpx 30rpx 30rpx;
				padding: $padd / 2 20rpx;
			}
		}
		.knowledge {
			.scroll-view_H {
				display: flex;
				>view {
					position: relative;
					flex: 1;
					height: 400rpx;
					padding: 20rpx;
					box-sizing: border-box;
					margin: 0 10rpx;
					box-shadow: 0 0 5px rgb(238, 152, 152);
					border-radius: 20rpx;
					max-width: 80%;
					.tipstyle {
						position: absolute;
						top: 0;
						right: 20rpx;
						width: 75rpx;
						height: 40rpx;
						border-radius: 0 0 10rpx 10rpx;
						font-size: 30rpx;
						text-align: center;
						color: #fff
					}
					.tip {
						@extend .tipstyle;
						background-color: #69c0ff;
					}
					.tip2 {
						@extend .tipstyle;
						background-color: #7cb305;
					}
					.title {
						height: 85rpx;
						margin: 25rpx 0;
						font-weight: 700;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						-webkit-line-clamp:2;
						-webkit-box-orient: vertical;
					}
					.text {
						height: 44%;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						-webkit-line-clamp:4;
						-webkit-box-orient: vertical;
						font-size: 28rpx;
					}
					.jumpknow {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						position: relative;
						bottom: -30rpx;
						color: #4E6CFF;
						image {
							width: 30rpx;
							height: 30rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}
</style>